<div
  class="form-group schema-form-array clearfix {{form.htmlClass}}"
  sf-array="form"
  ng-model="$$value$$"
  ng-model-options="form.ngModelOptions">
  <label
    class="control-label col-sm-3"
    for="{{ form.key.slice(-1)[0] }}"
    ng-class="{'sr-only': !showTitle(), 'field-required': form.required}"
    ng-show="showTitle()">
    <i ng-if="form.fa_cls" class="fa fa-fw {{ form.fa_cls }}"></i>&nbsp;{{ form.title }}
  </label>
  <div ng-class="{'col-sm-9': !form.notitle, 'col-sm-12': form.notitle}">
    <ol ng-model="modelArray" ui-sortable="form.sortOptions">
      <li
        class="{{ form.fieldHtmlClass }}"
        ng-class="{'deposit-inline': form.inline}"
        ng-repeat="item in modelArray track by $index">
        <div
          class="close-container pull-right"
          ng-class="{'clear-form': !form.inline}">
          <i class="sort-handle fa fa-sort fa-fw" ng-if="form.sortOptions.disabled === false"></i>
          <button
            class="close"
            type="button"
            ng-hide="form.readonly || form.remove === null"
            ng-click="deleteFromArray($index)"
            ng-disabled="form.schema.minItems >= modelArray.length">
          <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
        </div>
        <sf-decorator
          form="copyWithIndex($index)"
          ng-init="arrayIndex = $index"></sf-decorator>
      </li>
    </ol>
    <div ng-model="modelArray">
      <div
        class="help-block"
        ng-show="(hasError() && errorMessage(schemaError())) || form.description"
        ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
      <a
        class="add-button {{ form.style.add }}"
        ng-hide="form.readonly || form.add === null"
        ng-click="appendToArray()"
        ng-disabled="form.schema.maxItems <= modelArray.length">
        <i class="fa fa-plus"></i>&nbsp;{{ form.add || 'Add'}}
      </a>
    </div>
  </div>
</div>
